<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/10/29
  Time: 22:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.10.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css">
</head>
<style>
    .form-group {
        width: 400px;
        margin: 0 auto 15px auto;
        position: relative;
    }

    .form-control {
        display: inline-block;
    }

    .error-message {
        color: #39C5BB;
        display: inline-block;
        position: absolute;
        right: -20px;
        top: 7px;
        transform: translate3d(100%, 0, 0);
    }

    .btn.btn-primary:hover {
        color: rgba(0, 0, 0, .25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
    }

    .btn.btn-primary {
        width: 100%;
        color: rgba(0, 0, 0, .25);
        background-color: #f5f5f5;
        border-color: #d9d9d9;
    }

    a {
        color: #00a1d6;
    }

    a:hover {
        color: #00a1d6;
        text-decoration: none;
    }
</style>

<body>
<div>
    <div style="text-align: center;">
        <legend style="font-size: 40px;">注册</legend>
    </div>
    <div>
        <form method="POST" role="form">
            <div class="form-group">
                <input type="text" class="form-control" id="username" placeholder="用户名">
                <p class="error-message"></p>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="password" placeholder="密码">
                <p class="error-message"></p>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="protocol">
                        我已同意网站协议
                        <a href="">《用户使用协议》</a>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <button type="button" id="submit" class="btn btn-primary" disabled>注册</button>
            </div>
            <div class="form-group">
                <a href="${pageContext.request.contextPath}/sys/user/login" style="position: absolute;right: 0;">已有账号,直接登录&gt;</a>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    $('#protocol').on('click', function () {
        if ($(this).prop('checked')) {
            $('#submit').prop('disabled', false)
                .css({'color': 'white', 'background-color': '#39C5BB', 'border-color': 'teal'})
                .hover(function () {
                        // over
                        $(this).css('background-color', '#206863');
                    }, function () {
                        // out
                        $(this).css('background-color', '#39C5BB');
                    }
                );
        } else {
            $('#submit').prop('disabled', true)
                .css({'color': 'rgba(0, 0, 0, .25)', 'background-color': '#f5f5f5', 'border-color': '#d9d9d9'})
        }
    });
    $('#username').bind('input', function () {

        $.post("${pageContext.request.contextPath}/sys/user/usernameCheck", {username: $('#username').val(), type: "username"},
            function (data, textStatus, jqXHR) {
                $('#username + p').html(data);
            }
        );
    });
    $('#password').bind('input', function () {

        $.post("${pageContext.request.contextPath}/sys/user/passwordCheck", {password: $('#password').val(), type: "password"},
            function (data, textStatus, jqXHR) {
                $('#password + p').html(data);
            }
        );
    });
    $('#submit').click(function () {
        $.post("${pageContext.request.contextPath}/sys/user/userRegister", {
                username: $('#username').val(),
                password: $('#password').val()
            },
            function (data, textStatus, jqXHR) {
                let JSONdata = JSON.parse(data);
                console.log(JSONdata);
                if (JSONdata.username !== "" || JSONdata.password !== "") {
                    $('#username + p').html(JSONdata.username);
                    $('#password + p').html(JSONdata.password);
                } else {
                    alert("注册成功");
                    window.location.replace("${pageContext.request.contextPath}/sys/user/login");
                }
            }
        );
    });

</script>

</html>